<template>
  <el-container>
    <el-header class="header">
     <div class="con">
        
          <div class="lefta">
            <img id="idImg" src="../assets/u27.png" alt />
            <p class="leftP">动态管理</p>
          </div>
          <div class="righta">
            <img class="img1 imgimg" src="../assets/u736.png" alt />
            <img class="img2 imgimg" src="../assets/u735.png" alt />
            <img class="img3 imgimg" src="../assets/u28.jpg" alt />
            <p class="rightP">{{this.$store.state.loginName}}</p>
          </div>
      </div>
    </el-header>
    <el-main class="main">
      <div class="conHeader">
        <div class="conHeader1">
          <div class="text">
            <p>
              <span>
                <a class="al mar" href="./showOff-item1">动态分类</a>
              </span>
            </p>
          </div>
        </div>
        <div class="conHeader2">
          <div class="text">
            <p>
              <span class="span11">动态列表</span>
            </p>
          </div>
          <div class="xian"></div>
        </div>
        <div class="xian1"></div>
        <div class="shu11">
          <div class="shuLeft">校区:</div>
          <div class="shu">
            <div class="baoHe">
              <el-select v-model="value" filterable placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="shuLeft1">动态分类:</div>
          <div class="shu1">
            <div class="baoHe1">
              <el-cascader :props="props" placeholder="分类1"></el-cascader>
            </div>
          </div>

          <el-input
            class="inputV"
            placeholder="请输入标题搜索"
            prefix-icon="el-icon-search"
            v-model="input2"
          ></el-input>
        </div>
      </div>

      <div class="biao">
        <div class="biaoMain">
          <div class="biaoTou">
            <p class="leftTou">
              <span>动态分类数目</span>
              <span style="color:#FF4F00;">{{tableData.length}}</span>
              <span>个</span>
            </p>
            <div class="anNiu">
              <div class="tianJia">
                <el-button @click="add" style="background-color:#ff4f00" size="small" round>+ 添加</el-button>
              </div>
              <div class="shanChu">
                <el-button @click="del" size="small" round>删除</el-button>
              </div>
            </div>
          </div>

          <div class="biaoCon">
            <el-table
              
              ref="multipleTable"
              :data="tableData.slice((currpage - 1) * pagesize, currpage * pagesize)"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column label="标题" width="380">
                <template slot-scope="scope" class="tem">
                  <h3>{{ scope.row.date }}</h3>
                  <br />
                  <h4>一段假想的简介，这是一段比较长的简介。</h4>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="动态分类" width="180"></el-table-column>
              <el-table-column prop="address" label="上传时间" width="280" show-overflow-tooltip></el-table-column>
              <el-table-column prop="kai" label="启用状态" width="200">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.value"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column prop="kai" label="设为主页" width="200">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.value1"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                  ></el-switch>
                </template>
                <el-tooltip>
                  <el-switch
                    v-model="value1"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-value="100"
                    inactive-value="0"
                  ></el-switch>
                </el-tooltip>
              </el-table-column>
              <el-table-column class="content-text" fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    size="small"
                    @click="[handleEdit(scope.$index, scope.row,scope),dialogFormVisible = true]"
                  >编辑</el-button>
                 
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage3"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pagesize"
              layout="prev, pager, next, sizes, total, jumper"
              :total="this.tableData.length"
            ></el-pagination>
          </div>
        </div>
      </div>
       <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
                    <el-form ref="form" :model="form" label-width="70px">
                      <el-form-item label="标题名称">
                        <el-input v-model="form.id"></el-input>
                      </el-form-item>
                      <el-form-item label="动态分类">
                        <el-input v-model="form.name"></el-input>
                      </el-form-item>
                      <el-form-item label="上传时间">
                        <el-input v-model="form.tel"></el-input>
                      </el-form-item>
                      <el-form-item label="启用状态">
                        <el-input v-model="form.subject"></el-input>
                      </el-form-item>
                      <el-form-item label="设为主页">
                        <el-input v-model="form.calssNum"></el-input>
                      </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="editVisible = false">取 消</el-button>
                      <el-button type="primary" @click="saveEdit">确 定</el-button>
                    </span>
                  </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
let id = 0;
export default {
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          setTimeout(() => {
            const nodes = Array.from({ length: level + 1 }).map((item) => ({
              value: ++id,
              label: `选项${id}`,
              leaf: level >= 2,
            }));
            // 通过调用resolve将子节点数据返回，通知组件数据加载完成
            resolve(nodes);
          }, 1000);
        },
      },
      gridData: [
         {
          id:"",
          name:"",
          tel:"",
          subject:"",
          calssNum:""
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",

      options: [
        {
          value: "选项1",
          label: "宝安校区",
        },
        {
          value: "选项2",
          label: "南山校区",
        },
        {
          value: "选项3",
          label: "福田校区",
        },
        {
          value: "选项4",
          label: "罗湖校区",
        },
        {
          value: "选项5",
          label: "盐田校区",
        },
      ],
      value: "",
      tableData: [
       
        {
          date: "标题名称1",
          name: "分类1",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称1",
          name: "分类1",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称1",
          name: "分类1",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称1",
          name: "分类1",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称1",
          name: "分类1",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称2",
          name: "分类2",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称2",
          name: "分类2",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称2",
          name: "分类2",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称2",
          name: "分类2",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称2",
          name: "分类2",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称3",
          name: "分类3",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称3",
          name: "分类3",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称3",
          name: "分类3",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称3",
          name: "分类3",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称3",
          name: "分类3",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称4",
          name: "分类4",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称4",
          name: "分类4",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称4",
          name: "分类4",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称4",
          name: "分类4",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
        {
          date: "标题名称4",
          name: "分类4",
          address: "2016-09-21  08:50:08",
          tian: "编辑",
        },
      ],
     
      input2: "",
      value1: false,
      editVisible: false, //编辑老师弹窗的显示隐藏
      //分页器
      currentPage3: 1,
      pagesize: 5, //每页显示条数
      currpage: 1, //当前页码
    };
  },
  methods: {
                
    // 编辑操作
    handleEdit(index, row, scope) {
      console.log(scope);
      this.idx = index;
      this.form = row;
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$message.success(`修改成功`);
      this.$set(this.tableData, this.idx, this.form);
    },
    add: function () {
      this.tableData.push({
        data: "标题名称",
        name: "分类1",
        address: Date.now(),
        tian: "编辑",
      });
      this.shuLiang++;
    },
    del: function (index) {
      this.tableData.splice(index, 1);
      this.shuLiang--;
    },
    kai1: function () {
      console.log(11);
      return (this.value = !this.value);
    },
    //分页器 
    handleSizeChange(psize) {
      this.pagesize = psize;
    },
    handleCurrentChange(cpage) {
      this.currpage = cpage;
    },
     handleSelectionChange(val) {
      console.log(val);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>
<style>
.el-input--suffix .el-input__inner {
  margin-left: 50px;
}
</style>
<style scoped>
.al {
  text-decoration: none;
  color: #333;
}
.span11 {
  margin-left: 10px;
}
.mar {
  margin-right: 5px;
}
.img1 {
  width: 18px;
  height: 19px;
  margin: 5px;
}
.img2 {
  width: 16px;
  height: 21px;
  margin: 5px;
}
.img3 {
  width: 24px;
  height: 24px;
  margin: 5px;
}
.con {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.lefta {
  display: flex;
  align-items: center;
}
.righta {
  width: 200px;
  height: 65px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#idImg {
  width: 20px;
  height: 15px;
  margin: 10px;
}
.imgimg {
  margin: 10px;
  text-align: center;
  line-height: 65px;
  align-items: center;
}
.leftP {
  margin-left: 10px;
}
.biao {
  width: 100%;
  margin-left: 20px;
}
.tianJia {
  margin: 0 20px;
}
.leftTou {
  padding: 20px 30px 20px 30px;
}
.anNiu {
  margin: 20px 30px 20px 30px;
}
.divt {
  width: 50px;
  height: 30px;
  position: absolute;
  top: 40px;
  left: -20px;
}
.divt img {
  width: 24px;
  height: 24px;
}
.tem {
  position: absolute;
  left: 50px;
}

.tu {
  width: 24px;
  height: 24px;
  /* position: absolute;
  top: 30px;
  left: -20px; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.gao {
  height: 200px;
}
.block {
  float: right;
}
.leftTou {
  margin-left: 45px;
  margin-top: 10px;
}
.biaoTou {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.anNiu {
  display: flex;
}
.tian {
  display: flex;
  width: 89px;
  height: 32px;
  background: inherit;
  background-color: rgba(255, 79, 0, 1);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  font-size: 14px;
  color: #ffffff;
  line-height: 22px;
  text-align: center;
  margin: 5px;
  align-items: center;
}
.shan {
  display: flex;
  width: 71px;
  height: 32px;
  background: inherit;
  background-color: rgba(255, 255, 255, 1);
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(217, 217, 217, 1);
  border-radius: 4px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.647058823529412);
  line-height: 22px;
  margin: 5px;
  align-items: center;
  text-align: center;
}
.shu11 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  /* box-sizing:border-box; */
}
/* .shu {
  width: 200px;
  height: 80px;
}
.shu1 {
  width: 200px;
  height: 80px;
} */
.shuLeft {
  display: flex;
  /* justify-content:space-between; */
  align-items: center;
  margin-left: -180px;
  margin-top: 25px;
}
.baoHe {
  display: flex;
  /* justify-content:space-between; */
  align-items: center;
  margin-left: -20px;
  margin-top: 20px;
}
.shuLeft1 {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  margin-left: 10px;
  margin-top: 25px;
}
.baoHe {
  display: flex;
  /* justify-content:space-between; */
  align-items: center;
  margin-left: -120px;
  margin-top: 20px;
}
.baoHe1 {
  display: flex;
  /* justify-content: space-between; */
  align-items: center;
  margin-left: -120px;
  margin-top: 20px;
}
.inputV {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 500px;
  margin-top: 20px;
}
.conHeader {
  display: flex;
  margin-left: 20px;
  background: white;
  width: 100%;
  min-height: 130px;
  position: relative;
}
.xian1 {
  width: 100%;;
  height: 1px;
  background: gray;
  position: absolute;
  top: 32px;
}
.xian {
  width: 89px;
  padding-top: 10px;
  background: inherit;
  background-color: rgba(255, 255, 255, 0);
  box-sizing: border-box;
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 79, 0, 1);
  border-left: 0px;
  border-top: 0px;
  border-right: 0px;
  border-radius: 0px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-family: "PingFang-SC-Regular", "PingFang SC";
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #ff4f00;
  text-align: left;
  line-height: 22px;
}
.text {
  font-size: 16px;
}
.text p span {
  padding-left: 10px;
}
.conHeader1 {
  width: 100px;
  height: 46px;
  font-size: 16px;
  color: #ff4f00;
  text-align: left;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.647058823529412);
  text-align: left;
  line-height: 22px;
  margin-left: 20px;
  margin-left: 30px;
}
.conHeader2 {
  width: 100px;
  height: 46px;
  font-size: 16px;
  color: #ff4f00;
  text-align: left;
  line-height: 22px;
}
</style>